<template>
  <div class="filter">
    <div class="search">
      <div class="item">
        <span class="left">系统名称:</span>
        <el-input
          v-model="searchCondition.systemName"
          placeholder="请输入系统名称"
          size="small"
        ></el-input>
      </div>

      <div class="btn-area">
        <el-button @click="handle('reset')" size="small">重置</el-button>
        <el-button type="primary" size="small" @click="handle('search')">查询</el-button>
      </div>
    </div>

    <el-button
      type="primary"
      class="add-btn"
      size="small"
      @click="handle('add')"
      >添加</el-button
    >
  </div>
</template>

<script>
import { mixins } from "@/mixin/index";
export default {
  mixins: [mixins],
  pros: ["searchCondition"],
  components: {},
  data() {
    return {
      searchCondition: {
        systemName: "",
        isMain:false,
      },
    };
  },
  methods: {
    handle(type) {
      if(type == 'reset'){
        Object.keys(this.searchCondition).forEach(
          (key) => (this.searchCondition[key] = "")
        );
      }
      const { systemName: name } = this.searchCondition;
        this.$emit("handle", type, name);
    },
    // reset() {
    //   Object.keys(this.searchCondition).forEach(
    //     (key) => (this.searchCondition[key] = "")
    //   );
    // },
  },

};
</script>
<style lang="scss" scoped>
.filter {
  padding: 20px 0 0 0;
  padding-top: 5px;
  //   display: flex;
  .search {
    display: flex;
    margin: 0 0 25px;
    .item {
      margin-right: 20px;

      .left {
        margin-right: 20px;
        font-size: 14px;
        font-weight: 400;
        color: rgba(0,0,0,0.85);
        line-height: 22px;
      }
    }
   
  }

  .el-input {
    width: 200px;
  }
}
</style>
